<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="学习规划">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="planning-wrap">
            <cube-scroll>
                <div class="my-grade">
                    <div class="title">请填写个人成绩</div>
                    <div class="grade-box">
                        <table class="grade-table">
                            <thead>
                            <tr>
                                <td class="grade-table-mask table-left">
                                    <span class="course">科目</span>
                                    <span class="score">成绩</span>
                                </td>
                                <td>
                                    <div class="category" @click="selectScoreType">{{scoreTypeIndex<0?'请选择成绩类型':scoreTypeList[scoreTypeIndex].sc_type}}</div>
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="lession in lessionList" :key="lession.id">
                                <td class="grade-table-lession table-left">
                                    {{lession.ls_name}}
                                </td>
                                <td class="grade-table-input">
                                    <cube-input type="number" placeholder="请输入成绩"></cube-input>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="my-target">
                    <div class="title">
                        请选择目标学校
                    </div>
                    <div class="tips">
                        为了让老师更多的了解你，请完善目标学校
                    </div>
                    <div class="target-box">
                        <div class="target-area" @click="selectCounty(0)">
                            <div class="label">学区1（必填）</div>
                            <div class="value">{{countySelect[0]<0?'':countyList[countySelect[0]].SchoolName}}</div>
                        </div>
                        <div class="target-area" @click="selectCounty(1)">
                            <div class="label">学区2（必填）</div>
                            <div class="value">{{countySelect[1]<0?'':countyList[countySelect[1]].SchoolName}}</div>
                        </div>
                        <div class="target-area" @click="selectCounty(2)">
                            <div class="label">学区3（必填）</div>
                            <div class="value">{{countySelect[2]<0?'':countyList[countySelect[2]].SchoolName}}</div>
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <div class="submit" @click="submit">提 交</div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import NavBar from "@/components/aui/NavBar.vue";


    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar
        }
    })
    export default class LearningPlanning extends Scene {

        private lessionList: any[] = [];
        private scoreTypeList: any[] = [];
        private scoreTypeIndex: number = -1;
        private countyList: any[] = [];
        private countySelect: number[] = [-1, -1, -1];
        private countyListPickerIndex: number = 0;

        @State("UserStore")
        public user!: InterfaceUser;

        private get countyListPicker(): any {
            if (this.countyList.length < 1) {
                return "";
            }
            const countyListPicker = (<any> this).$createPicker({
                title: `请选择目标学区${this.countyListPickerIndex + 1}`,
                data: [this.countyList],
                alias: {
                    value: "Id",
                    text: "SchoolName"
                },
                onSelect: (val: string, index: number) => {
                    this.countySelect[this.countyListPickerIndex] = index;
                }
            });
            return countyListPicker;
        }

        private mounted(): void {
            Http.get(this.api.getLessonList).then((res) => {
                if (res.Success) {
                    this.lessionList = res.Data;
                }
            });

            Http.get(this.api.scoreTypeList).then((res) => {
                if (res.Success) {
                    this.scoreTypeList = res.Data;
                }
            });

            Http.get(this.api.getCourseList, CommonUnit.argumentWithUser(this.user)).then((res) => {
                if (res.Success) {
                    this.countyList = res.Data;
                } else {
                    (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    }).show();
                }
            });
        }

        private selectScoreType(): void {
            (<any> this).$createPicker({
                title: "选择成绩类型",
                selectedIndex: [this.scoreTypeIndex < 0 ? "" : this.scoreTypeIndex],
                data: [this.scoreTypeList],
                alias: {
                    value: "id",
                    text: "sc_type"
                },
                onSelect: (val: string, index: number) => {
                    this.scoreTypeIndex = index;
                }
            }).show();
        }

        private back(): void {
            this.navigateBack();
        }

        private selectCounty(index: number): void {
            if (this.countyListPicker === "") {
                (<any> this).$createToast({
                    mask: true,
                    type: "error",
                    time: 1500,
                    txt: "未查询到相关学区，请联系校方",
                }).show();
            } else {
                this.countyListPickerIndex = index;
                this.$nextTick(() => {
                    this.countyListPicker.show();
                });
            }

        }

        private submit(): void {
            console.log("submit");
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height 100vh;
        width 100vw;

    .planning-wrap
        height 100vh
        padding-top calc(44px + env(safe-area-inset-top));

    .my-grade, .my-target
        padding 10px;
        background #fff;
        position relative;

        .title
            margin-bottom 20px;
            background $theme-common-color;
            font-size 13px;
            border-radius 35px;
            width 120px;
            line-height 27px;
            text-align center;
            color #fff;

    .my-target
        margin-top 10px;

    .my-grade
        .grade-box
            font-size 14px;
            width 100%;

            .grade-table
                width 100%;
                border 0;

                tr
                    border-top 1px solid #bbb;
                    border-bottom 1px solid #bbb;

                    td
                        width 70%;

                    .table-left

                        width 30%;
                        box-sizing border-box;
                        border-right 1px solid #bbb;
                        padding-right 20px

                .grade-table-mask
                    position relative;

                    .course, .score
                        position absolute;
                        line-height 21px;

                    .course
                        bottom 0;
                        left 0;
                        margin-bottom 0;

                    .score
                        top 0;
                        right 0;
                        margin-right 5px;

                .category
                    height 42px;
                    display flex;
                    justify-content center;
                    align-items center;

                .grade-table-input
                    vertical-align inherit;
                    text-align center;

                    /deep/ .cube-input
                        color #111

                        &::after
                            border none;

    .my-target
        .tips
            font-size 14px;
            line-height 30px;
            text-align center;

        .target-box
            position relative;
            margin-top 10px

            .target-area
                height 40px;
                display flex;
                justify-content space-between;
                align-items center
                border-bottom 1px solid #bbb;

                &:last-child
                    border-bottom 0 solid #bbb;

                .label
                    width 30%;

    .btn
        margin 35px 20px 10px 20px;
        display flex;
        flex-flow row nowrap
        justify-content space-between
        position relative

        .submit
            background $theme-common-color
            color #fff
            line-height 45px
            height 45px
            border-radius 45px
            font-size 16px
            width 100%
            text-align: center;
            box-shadow: 0 3px 6px #f7c7b1;
</style>
